<script setup>
import { ref } from "vue";
import { buildTechminoRandomField } from "@/api/tetr.js";
import { ElMessage } from "element-plus";

// 场地参数
const formParams = ref({
    line: 15,
    colorful: 0,
    emptyRate: 30,
})

// 生成的场地信息
const fieldArr = ref([])
const fieldStr = ref('')

// 初始化空白场地
let emptyMap = [];
for ( let i = 0; i < 20; i++ ) {
    emptyMap.push([])
    for ( let j = 0; j < 10; j++ ) {
        emptyMap[i].push(1)
    }
}

// 赋值给场地数组
// fieldArr.value = emptyMap;

console.warn(emptyMap)

// 生成随机场地
const buildRandomField = (type) => {
    buildTechminoRandomField({ ...formParams.value, type }).then(res => {
        fieldStr.value = res.data.field
        fieldArr.value = res.data.map

        // 如果fieldArr不到20行则填充够20行
        while ( fieldArr.value.length < 20 ) {
            fieldArr.value.reverse()
            fieldArr.value.push(emptyMap[0])
            fieldArr.value.reverse()
        }
    })
}

// 复制字符串
const copyStr = () => {
    if ( navigator.clipboard === void 0 ) {
        alert('您的浏览器不支持复制，请手动全选复制')
        return
    }
    navigator.clipboard.writeText(fieldStr.value).then(
            () => {
                ElMessage({
                    message: '场地字符串已复制到剪贴板，请前往Techmino导入',
                    type: 'success',
                })
            },
    );
}

</script>

<template>
    <div class="techmino">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form :inline="true" :model="formParams" class="demo-form-inline">
                    <el-form-item label="场地行高">
                        <el-input-number style="width: 120px" :min="1" :max="20" v-model="formParams.line" placeholder="最多生成20行"/>
                    </el-form-item>
                    <el-form-item label="占空/纵深比">
                        <el-input-number style="width: 120px" :min="1" :max="100" v-model="formParams.emptyRate" placeholder="空格子的数量"/>
                    </el-form-item>
                    <el-form-item label="彩色方块">
                        <el-switch
                                v-model="formParams.colorful"
                                inline-prompt
                                active-text="是"
                                inactive-text="否"
                                active-value="1"
                                inactive-value="0"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" v-btn @click="buildRandomField(1)">破碎地形</el-button>
                        <el-button type="success" v-btn @click="buildRandomField(2)">等棍地形</el-button>
                        <el-button type="primary" v-btn @click="copyStr()">复制字符串</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24">
                <p class="desc">趣味功能 => 用于生成一个破碎的场地，可以导入Techmino自定义模式尝试挖掘，主要用于训练场地打烂掉以后如何进行挖掘操作</p>
            </el-col>
            <el-col :span="8">
                <el-input
                        v-model="fieldStr"
                        style="width: 100%;"
                        rows="15"
                        type="textarea"
                        show-word-limit
                        placeholder="生成结果输出区"
                />
            </el-col>
            <el-col :span="16">
                <div class="preview-row" v-for="(row, index) in fieldArr" :key="index">
                    <div class="preview-cell" v-for="(col, colIndex) in row" :key="colIndex" :class="'cc'+col"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
.techmino {
    width: 100%;

    .desc {
        font-size: 14px;
    }

    .preview-row {
        display: flex;
        width: 150px;

        // 最后一列的所有格子都有底边框
        &:last-child .preview-cell {
            border-bottom: 1px solid #f2f2f2;
        }

        .preview-cell {
            width: 15px;
            height: 15px;
            border-left: 1px solid #f2f2f2;
            border-top: 1px solid #f2f2f2;

            // 每一行的最后一个格子有右边框
            &:last-child {
                border-right: 1px solid #f2f2f2;
            }

            &.cc1 {
                background: transparent;
            }

            &.cc2 {
                background: rgb(182, 52, 52);
            }

            &.cc3 {
                background: rgb(187, 80, 46);
            }

            &.cc4 {
                background: rgb(190, 120, 37);
            }

            &.cc5 {
                background: rgb(180, 166, 62);
            }

            &.cc6 {
                background: rgb(152, 177, 52);
            }

            &.cc7 {
                background: rgb(102, 167, 36);
            }

            &.cc8 {
                background: rgb(39, 165, 36);
            }

            &.cc9 {
                background: rgb(36, 157, 136);
            }

            &.cc10 {
                background: rgb(36, 152, 177);
            }

            &.cc11 {
                background: rgb(36, 139, 196);
            }

            &.cc12 {
                background: rgb(36, 90, 196);
            }

            &.cc13 {
                background: rgb(36, 60, 188);
            }

            &.cc14 {
                background: rgb(100, 36, 182);
            }

            &.cc15 {
                background: rgb(139, 36, 166);
            }

            &.cc16 {
                background: rgb(166, 36, 141);
            }

            &.cc17 {
                background: rgb(182, 39, 107);
            }

            &.cc22 {
                background: rgb(140, 136, 135);
            }
        }
    }
}
</style>
